<template>
  <div id="categoryList">
    <h3>产品分类页面</h3>

    <van-tabs v-model="tabActive">
      <van-tab v-for="(item, index) in clist" :key="index" :title="item.name">
        <h3>{{ item.name }}</h3>
        <p>{{ item.front_name }}</p>
        <van-grid :border="true" :column-num="2" v-if="item.plist">
          <van-grid-item
            v-for="(item1, index1) in item.plist.data"
            :key="index1"
            :to="'/product/' + item1.id"
          >
            <van-image width="100" height="100" :src="item1.list_pic_url" />
            <h4 class="van-ellipsis">{{ item1.name }}</h4>
            <p class="price">¥{{ item1.retail_price }}</p>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";

export default {
  props: ["id"],
  data() {
    return {
      tabActive: 0,
      clist: [],
      size: 20,
    };
  },
  async created() {
    // console.log(this.$root.api);
    let res = await axios.get(this.$root.api.GoodsCategory, {
      params: { id: this.id },
    });
    this.clist = res.data.data.brotherCategory;
    this.clist.forEach(async (item, index) => {
      item.plist = await this.getlist(item.id, 1);
      console.log(item.plist);
      this.$forceUpdate(); //强制更新数据
    });
    // console.log(this.clist);
  },

  methods: {
    async getlist(cid, page) {
      // {categoryId: that.data.id, page: that.data.page, size: that.data.size}
      let res = await axios.get(this.$root.api.GoodsList, {
        params: {
          categoryId: cid,
          page: page,
          size: this.size,
        },
      });
      return res.data.data;
    },
  },
};
</script>

<style lang="less">
#categoryList {
  .van-grid-item {
    overflow: hidden;
    box-sizing: border-box;
  }
  .van-ellipsis {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    margin: 5px 0;
    padding: 0 20px;
  }
  .price {
    color: red;
    margin: 0;
  }
}
</style>